<template>
	<span class="demonstration">请选择一个时间</span>
	<el-date-picker v-model="dateValue" type="date" placeholder="请选择一个日期" @change="data" :shortcuts="shortcuts"
		:size="large" value-format="YYYY-MM-DD" />

	<el-table :data="tableData" border stripe show-overflow-tooltip highlight-current-row style="width: 100%"
		:row-style="{ height: '20px' }" :cell-style="{ padding: '0px' }"
		:default-sort="{ prop: 'ylbc', order: 'descending' }">
		<el-table-column type="index" fixed></el-table-column>
		<el-table-column align="left " fixed width="180px">
			<template #header>
				<el-input v-model="search" size="small" placeholder="Type to search" clearable />
			</template>
			<template #default="scope">
				<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
			</template>
		</el-table-column>
		<el-table-column prop="c" label="code" fixed></el-table-column>
		<el-table-column prop="n" label="名称" fixed></el-table-column>
		<el-table-column prop="zdp" label="涨跌幅" sortable :sort-method="(a, b) => sort(a.zdp, b.zdp)"
			:formatter="(row, column) => changeRatio(row[column.property])"></el-table-column>
		<el-table-column prop="p" label="最新价" sortable :formatter="(row, column) => { return row[column.property] / 1000 }">
			<!-- https://blog.csdn.net/weixin_45417161/article/details/132298261 -->
			<template #header>
				<el-popover placement="top-start" :width="320" trigger="hover">
					<template #reference>
						<el-icon>
							<QuestionFilled />
						</el-icon>
					</template>
					<template #default>
						<el-badge value="红色标记:当前标记价小于最新价,表示浮盈" type="danger" />
						<el-badge value="绿色标记:当前标记价大于等于最新价,表示浮亏" type="success" />
					</template>
				</el-popover>
				<span>最新价</span>
			</template>
		</el-table-column>
		<el-table-column prop="amount" label="成交额" sortable
			:formatter="(row, column) => changeMoney(row[column.property])" />
		<el-table-column prop="ltsz" label="流通市值" sortable :formatter="(row, column) => changeMoney(row[column.property])"
			:sort-method="(a, b) => sort(a.ltsz, b.ltsz)" />
		<el-table-column prop="hs" label="换手率" sortable
			:formatter="(row, column) => changeRatio(row[column.property])"></el-table-column>
		<el-table-column prop="zs" label="涨速" sortable
			:formatter="(row, column) => changeRatio(row[column.property])"></el-table-column>
		<el-table-column prop="zf" label="涨幅" sortable
			:formatter="(row, column) => changeRatio(row[column.property])"></el-table-column>
		<el-table-column prop="yfbt" label="昨日封板" sortable></el-table-column>
		<el-table-column prop="zttj" label="涨停统计" sortable>
			<template #default="scope">
				<span> {{ scope.row.zttj.ct }} / {{ scope.row.zttj.days }}</span>
			</template>
		</el-table-column>
		<el-table-column prop="ylbc" label="昨日连板数" sortable></el-table-column>
		<el-table-column prop="hybk" label="所属行业"></el-table-column>

	</el-table>
</template>

<script >

export default {
	// 昨日行情 发现最少3个IP节点提供数据响应
	// https://quote.eastmoney.com/ztb/detail#type=ztgc
	setup(props, context) {
		Vue.onMounted(() => {
			// 在这里执行你的代码  
			data('');
			setInterval(() => data(''), 30000);
		});
		let dateValue = Vue.ref("");
		let search = Vue.ref("");
		let tableData = Vue.ref([]);

		// const tableData = Vue.computed(() => {
		// 	return tableData.value?.filter(
		// 		(data) => data.c.toLowerCase().includes(search.value.toLowerCase())
		// 	)
		// });

		let shortcuts = [
			{
				text: '今天',
				value: new Date(),
			},
			{
				text: '昨天',
				value: () => {
					const date = new Date()
					date.setTime(date.getTime() - 3600 * 1000 * 24)
					return date
				},
			},
			{
				text: '一周前',
				value: () => {
					const date = new Date()
					date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
					return date
				},
			}
		];
		async function data(dateValue) {
			// https://dayjs.gitee.io/docs/zh-CN/get-set/day
			var dateDay = dayjs();
			if (dateValue != '') {
				dateDay = dayjs(dateValue);
			}

			dateValue = dateDay.format('YYYYMMDD')
			//console.log(" data ", dateValue);
			var options = {
				method: 'GET',
				url: 'https://push2ex.eastmoney.com/getYesterdayZTPool',
				params: {
					ut: '7eea3edcaed734bea9cbfc24409ed989',
					dpt: 'wz.ztzt',
					Pageindex: '0',
					pagesize: '100',
					sort: 'ylbc:desc',
					date: dateValue,
					_: '1702384830589'
				}
			};

			await new Promise((resolve, reject) => {
				axios.request(options).then(function (response) {
					console.log(response.data);
					return resolve(response.data);
				}).catch(function (error) {
					console.error(error);
				});
			}).then(data => tableData.value = data.data.pool);
		}

		function handleDelete(index, row) {
			console.log("handleDelete");
			tableData.value = this.tableData.filter(
				(data) => !data.c.toLowerCase().includes(row.c.toLowerCase())
			);
		}
		function sort(r1, r2) {
			//https://blog.csdn.net/shids_/article/details/129046419
			return parseFloat(r1) - parseFloat(r2);
		}
		function changeRatio(num) {
			return Number(num).toFixed(2) + "%";
		}
		function changeMoney(num) {
			// 使用 window 调用外部JS中的方法
			return window.changeMoney(num);
		}

		return {
			dateValue,
			search,
			tableData,
			shortcuts,
			data,
			handleDelete,
			sort,
			changeRatio,
			changeMoney
		}

	},
	computed: {
		tableData() {
			var searchStr = this.search;
			return this.tableData.filter(
				(data) => data.c.toLowerCase().includes(searchStr.toLowerCase())
			)
		}
	}
}

</script>